// The Ant Design library modifies the global styles which will affect the UI in Hue
// in multiple places where not intended. So in order to utilize the components locally
// without leaking styles we wrap it all in an antd class. Since ant-modal-root likely
// is placed outside the .antd wrapper we need to add the styles there as well.

/* stylelint-disable no-invalid-position-at-import-rule */

.antd,
.ant-modal-root {
  // We need to reset some global styles from Bootstrap to prevent them from
  // interfering with the Antd styles
  @import url('./reset-globals.less');

  // Import global antd styles
  @import url('antd/dist/antd.less');
  @import url('node_modules/cuix/dist/styles/variables.less');

  // Required global overrides:
  .ant-modal-mask,
  .ant-modal-wrap {
    // There are Hue components using z-indexes higher than the ant modal.
    // Further increase the z-index here if needed.
    z-index: 1010;
  }
}

// Ant Design's Modal adds a new body width to compensate for vertical scrollbar
// which has to be reverted since Hue (at the time of writing) uses overflow:hidden
// on the body tag.
body.ant-scrolling-effect {
  width: 100% !important;
}

// We need these styles available outside the .antd wrapper
@import url('antd/es/menu/style/index.less');
@import url('antd/es/style/core/motion.less');
@import url('antd/es/dropdown/style/index.less');
@import url('antd/es/tooltip/style/index.less');
@import url('antd/es/spin/style/index.less');
@import url('antd/es/tabs/style/index.less');

// Fix to align icons in buttons with text
.ant-btn.iconLeft {
  &:not(.ant-dropdown-trigger) {
    > span {
      display: flex;
    }
  }
}

// Fix to align modal buttons with margin-left when buttons are disabled
.ant-modal-footer {
  .ant-row {
    .ant-col {
      .ant-btn-default {
        margin-left: 8px;
      }
    }
  }

  // Fix the modal loading button gap
  .ant-btn-loading-icon {
    margin-right: 8px;
  }

  .ant-btn-loading {
    cursor: not-allowed;
  }
}
